﻿<?php
/*
Template Name: Services
*/
?>
<?php get_header(); ?>
<div class="pagenev"><div class="conwidth"><?php design_breadcrumbs() ?></div></div>
<div id="container">
<div id="content-full">


<div class="featured-boxs">

<?php
for ($i = 1; $i <= 3; $i++)
{
	?>
	<span class="featured-box" onclick="move(<?php echo $i; ?>)">
		<a href="javascript:void(0);">
			<span class="frame-box">
				<img src="<?php echo of_get_option('featured-image'.$i, get_template_directory_uri() . '/images/featured-image'.$i.'.jpg') ?>"/>
			</span>
		</a>
		<div class="caption-container">
			<a href="portfolio-single.html"><span class="bold"><?php echo of_get_option('featured-title'.$i); ?></span></a>
		</div>
		<div class="text-container">
			<p><?php echo of_get_option('featured-desc'.$i); ?></p>
		</div>
	</span>
	<?php }
?>

</div> <!-- featured-boxs -->

<div class="sep3">sep</div>

<div class="quote-list">
				<?php
				$type_services = get_terms(
									'service', array(
									'orderby'    => 'count',
									'hide_empty' => 0) );									
				$index = 1;
				foreach ($type_services as $service)
				{ ?> 				
				
					<div class="quote-item" number="<?php echo $index;?>" style="<?php if($index == 1) echo "opacity: 1; bottom: 0;"; ?>" >
						<blockquote >
							<?php echo $service->description; ?>
						</blockquote>
					</div>
					
				<?php
					$index++;
				} ?>

</div>

<div class="list-topic">
	<?php 
		$index = 1;
		foreach ($type_services as $service){		
		
	?>
	<div class="topic" style="<?php if($index == 1) echo "left: 0px; opacity: 1;"; ?>" number="<?php echo $index; ?>">
		<h2><?php echo $service->name; ?></h2>
		<?php 
			global $post;
			$query = array('post_type' => 'product','service' => $service->name);
			$index++;
			
			$type_products = get_posts( $query );
			echo count($type_products);
			foreach ($type_products as $product)
			{
				$name = get_post_meta($product->ID, 'product_name', TRUE);
				$thumb_img = get_post_meta($product->ID, 'product_image', TRUE);
				$large_image = wp_get_attachment_url( get_post_thumbnail_id($product->ID) );
				$desc_short = get_post_meta($product->ID, 'product_description', TRUE);
				$desc_long = $product->post_content; //content product
				$title_product = $product->post_title; //title lớn ở trên
				$link = $product->guid;//link di toi trang detail của product
				?>
				<div class="item">
					<h3><?php echo $name?> </h3>
					<a href="<?php echo $link?> <br/>"> <img class="logo" src="<?php echo $thumb_img?>" /></a>
					<div class="more">
						<p><?php echo $desc_short?></p>
					</div> 
				</div>
			<?php } ?>
		
	</div>
	<?php } ?>				
	
</div>

<script type="text/javascript">
		var $j = jQuery.noConflict();
		
        function move(number){
            // reset
			
            $j(".topic").css('left', "100%");            
            $j(".quote-item").css('bottom', "100px");
            $j(".quote-item").css('opacity', "0");
            $j(".topic").css('opacity', "0.5");
            
            $j(".topic[number='"+ number +"']").css('left', "0px");            
            $j(".topic[number='"+ number +"']").css('opacity', "1");
            $j(".quote-item[number='"+ number +"']").css('opacity', "1");    
            $j(".quote-item[number='"+ number +"']").css('bottom', "0px");            
			
        }
</script>


<div class="sep3">sep</div>

</div>
<?php get_footer(); ?>